<!doctype html>
<html>
	<title>我的</title>
	<meta charset="utf-8">
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<link href="font/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<script>
	  var deviceWidth = document.documentElement.clientWidth;
         if(deviceWidth > 750) 
            deviceWidth = 750; 
      document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
</script>
</head>

<script type="text/javascript">
			$(function() {
	var id=window.localStorage.getItem('userid');
	var url='http://172.24.10.175/workout/api.php/getmine/userid/'+id;  	
            $.ajax({
                type: 'post',
                url: url,
                cache: false,
                dataType: 'jsonp',
				jsonp: "callback",
                success: function (data){
                   $("h4").text(data.user_name);
                   $(".picture").attr("src","http://172.24.10.175/workout/Uploads/"+data.photo);

                },error(){
                	alert(1);
                }
            });
        });
</script>

<style type="text/css">
				*{
					margin: 0;
					padding: 0;
					font-family: 'Helvetica Neue',Helvetica,sans-serif;
				    font-size: 17px;
				    line-height: 21px;
				}
				
				a{
					text-decoration: none;
				}
				a:hover{
					    cursor: pointer;
				}
				
				.nav-bottom{
					padding-bottom: 50px;
                    padding-top: 40px;
				}
				
				.new-mine{
					background: #fff;
				}
			    
			    .mine-photo{
			    	width: 100%;
				    background-image: url(img/head.jpg);
				    height: 18rem;
				    background-repeat: no-repeat;
				    text-align: center;
				    position: relative;
				    color: #fff;
				    width: 320px;
				    height: 320px;
			    }		
			    
			    .mine-photo img{
			    	width: 80px;
				    height: 80px;
				    border-radius: 50%;
				    border: solid 1px #fff;
				    margin-top: 34%;
			    }
			    
			    h4 {
                    font-size: 18px;  
                    line-height: 1;
					margin-top: 5px;
					margin-bottom: 5px; 
					display: block;
				    -webkit-margin-before: 1.33em;
				    -webkit-margin-after: 1.33em;
				    -webkit-margin-start: 0px;
				    -webkit-margin-end: 0px;
				    font-weight: bold;            
                }
                
                .new-mine-title{
                	width: 100%;
				    padding: 2%;
				    background-color: #fff;
				    border-bottom: solid 1px #efefef;
				    font-weight: bold;
                }
                
                .new-mine-title a{
                	text-decoration: none;
                    color: #FC605A;
                }
                
                .new-mine-title span {
					font-size: 17px;
				    margin-right: 3%;
				}
                .iconfont {
				    font-family: "iconfont" !important;
				    font-size: 28px;
				    font-weight: normal;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				    -webkit-text-stroke-width: 0.2px;
				}
				
				.new-min-title-list {
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    padding: 0;
				}
				
				ul, li {
				    font-style: normal;
				    list-style: none;
				}
				
				li {
				    display: list-item;
				    text-align: -webkit-match-parent;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				.new-min-title-list li a {
				    display: flex;
				    flex-direction: column;
				    align-items: center;
				}
				.new-min-title-list li a {
				    color: #000;
				}
				
				.mui-table-view {
				    position: relative;
				    margin-top: 0;
				    margin-bottom: 0;
				    padding-left: 0;
				    list-style: none;
				    background-color: #fff;
				}
				
				.mui-table-view-cell {
				    position: relative;
				    overflow: hidden;
				    padding: 11px 15px;
				    -webkit-touch-callout: none;
				}
				
				.mui-table-view-cell>a:not(.mui-btn) {
				    position: relative;
				    display: block;
				    overflow: hidden;
				    margin: -11px -15px;
				    padding: inherit;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    color: inherit;
				    border-bottom: solid 1px #efefef;
				}
			
				
				.nav-footer {
				    width: 100%;
				    position: fixed;
				    bottom: 0;
				    left: 0;
				    display: flex;
				    align-items: center;
				    justify-content: space-around;
				    background: #fff;
				    border-top: solid 1px #e6e6e6;
				    padding: 1%;
				    height: 50px;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 10px;
				    color: #929292;
				}
				.nav-footer a span img {
				    height: 25px;
				    overflow: hidden;
				    font-size: 23px;
				    padding-top: 2px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.nav-footer a {
				    display: flex;
				    flex-direction: column;
				    align-content: center;
				    align-items: center;
				    font-size: 11px;
				    color: #929292;
				}
				
				.right{
					position: absolute;
					top: 7px;
					right: 0px;
				}
				
				ul.new-min-title-list{
					border-bottom: solid 1px #efefef;
				}
	</style>
<body>
	
<div class="nav-bottom">
	<div class="new-mine">
		<div class="mine-photo min-photo-bgimg">
					<img src="" class="picture">
				    <span class="tel"><h4></h4></span>	
		</div>	
		
		<div class="new-mine-title"><a href="#">
		<a href=""><img src="img/order.png"/>全部订单</a>
		</div>
		<span class="icon iconfont icon-daishenhe"></span>
		<ul class="new-min-title-list">
		<li><a href="new-mine-order.html"><img src="img/join.png"/>待参加</a></li>
		<li><a href="new-mine-order1.html"><img src="img/get.png"/>待收货</a></li>
		<li><a href="new-mine-order2.html"><img src="img/finish.png"/>已完成</a></li>
		</ul>
		
		<div class="new-mine-title">
			<a href="new-mine-order3.html"><span><img src="img/information.png"/></span>我的信息</a>
		</div>
				
		<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="myshowpicture.html" >
							我的晒图
							<img src="img/right (1).png" class="right"/>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="focus.html" >
							我的关注
							<img src="img/right (1).png" class="right"/>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="changeHead.html" >
							修改头像
							<img src="img/right (1).png" class="right"/>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="changepassword.html" >
							修改密码
							<img src="img/right (1).png" class="right"/>
						</a>
					</li>
				</ul>
	</div>
	
</div>

<div class="nav-footer">
			<a class="" href="index.html">
				<span><img src="img/home.png"/></span>
				<span class="mui-tab-label">联盟</span>
			</a>
			<a href="trail.html">
				<span><img src="img/sport.png"/></span>
				<span class="mui-tab-label">训练</span>
			</a>
			<a href="showpicture.html">
				<span><img src="img/picture.png"/></span>
				<span class="mui-tab-label">晒图</span>
			</a>
			<a class="icon-active" href="club.html">
				<span><img src="img/clubs.png"/></span>
				<span class="mui-tab-label">俱乐部</span>
			</a>
			<a href="mine.html">
				<span><img src="img/mine.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</div>

</body>
